<template>
  <el-dialog v-dragDialog :visible="visible" :close-on-click-modal="false" :width="width"
             :destroy-on-close="destroyClose"
             :show-close="showClose"
             @close="close" @open="open" :title="title" :append-to-body="appendBody">
    <slot/>
    <span slot="footer" style="text-align: center" v-if="footer">
       <el-button :loading="confirmLoading" @click="visibleConfirm" type="primary" style="margin-right: 30px">{{
           $t('确认')
         }}</el-button>
      <el-button type="info" @click="visibleCancel" v-show="showClose">{{ $t('取消') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '40%'
    },
    title: {
      type: String
    },
    destroyClose: {
      default: false
    },
    footer: {
      default: true
    },
    appendBody: {
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    confirmLoading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    visibleConfirm() {
      this.$emit('confirm')
    },
    visibleCancel() {
      this.$emit('cancel')
    },
    close() {
      this.$emit('close')
      this.$emit('update:visible', false)
    },
    open() {
      this.$emit('open')
    },
  },
  destroy() {
    this.$emit('update:visible', false)
  }
}
</script>

<style>
.el-dialog__header {
  height: 24px;
}
</style>
